移动设备的CSS3 Media Queries之常用显示器和移动设备

发表于   |   分类于

随着Web响应式的趋势越来越流行，媒体查询在创建响应式网站中起到了主要作用。利用媒体查询，我们可以针对不同的设备，如显示器、智能手机和平板，来写CSS。在这里我把常用的媒体查询进行了分类总结，希望在以后的工作当中方便查阅。这篇主要是对常用显示器和移动设备进行了总结。

显示器媒体查询

640px

1
2
3
@media screen and (max-width: 640px) { 

}

800px

1
2
3
@media screen and (max-width: 800px) {

}

1024px

1
2
3
@media screen and (max-width: 1024px) { 

}

HTC Evo，BlackBerry Torch，HTC Thunderbolt，HD2

1
2
3
4
@media screen and (max-device-width: 480px) 
{ 

}

平板媒体查询

Motorola Xoom

1
2
3
4
5
6
7
8
9
10
11
/* Landscape Mode */
@media (max-device-width: 1280px) and (orientation: landscape) 
{ 

}

/* Portrait Mode */
@media (max-device-width: 800px) and (orientation: portrait) 
{ 

}

HTC Flyer

1
2
3
4
5
6
7
8
9
10
11
/* Landscape Mode */
@media (max-device-width: 1024px) and (orientation: landscape) 
{ 

}

/* Portrait Mode */
@media (max-device-width: 600px) and (orientation: portrait) 
{ 

}

BlackBerry PlayBook

1
2
3
4
5
6
7
8
9
10
11
/* Landscape Mode */
@media (max-device-width: 1024px) and (orientation: landscape) 
{ 

}

/* Portrait Mode */
@media (max-device-width: 600px) and (orientation: portrait) 
{ 

}

HP TouchPad

1
2
3
4
5
6
7
8
9
10
11
/* Landscape Mode */
@media (max-device-width: 1024px) and (orientation: landscape) 
{ 

}

/* Portrait Mode */
@media (max-device-width: 768px) and (orientation: portrait) 
{ 

}

Lenovo Thinkpad Tablet

1
2
3
4
5
6
7
8
9
10
11
/* Landscape Mode */
@media (max-device-width: 1280px) and (orientation: landscape) 
{ 

}

/* Portrait Mode */
@media (max-device-width: 800px) and (orientation: portrait) 
{ 

}

Sony Tablet S

1
2
3
4
5
6
7
8
9
10
11
/* Landscape Mode */
@media (max-device-width: 1280px) and (orientation: landscape) 
{ 

}

/* Portrait Mode */
@media (max-device-width: 800px) and (orientation: portrait) 
{ 

}

T-Mobile G-Slate

1
2
3
4
5
6
7
8
9
10
11
/* Landscape Mode */
@media (max-device-width: 1280px) and (orientation: landscape) 
{ 

}

/* Portrait Mode */
@media (max-device-width: 768px) and (orientation: portrait) 
{ 

}

ViewSonic ViewPad 10

1
2
3
4
5
6
7
8
9
10
11
/* Landscape Mode */
@media (max-device-width: 1024px) and (orientation: landscape) 
{ 

}

/* Portrait Mode */
@media (max-device-width: 600px) and (orientation: portrait) 
{ 

}

Dell Streak 7

1
2
3
4
5
6
7
8
9
10
11
/* Landscape Mode */
@media (max-device-width: 800px) and (orientation: landscape) 
{ 

}

/* Portrait Mode */
@media (max-device-width: 480px) and (orientation: portrait) 
{ 

}

ASUS Eee Pad Transformer

1
2
3
4
5
6
7
8
9
10
11
/* Landscape Mode */
@media (max-device-width: 1080px) and (orientation: landscape) 
{ 

}

/* Portrait Mode */
@media (max-device-width: 800px) and (orientation: portrait) 
{ 

}

HTC One landscape & portrait

1
2
3
4
5
6
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {

}

HTC One portrait

1
2
3
4
5
6
7
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {

}

HTC One landscape

1
2
3
4
5
6
7
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {

}

Asus Nexus 7 landscape & portrait

1
2
3
4
5
6
7
@media screen
and (device-width: 601px)
and (device-height: 906px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332) {

}

Asus Nexus 7 portrait

1
2
3
4
5
6
7
8
@media screen
and (device-width: 601px)
and (device-height: 906px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332)
and (orientation: portrait) {

}

Asus Nexus 7 landscape

1
2
3
4
5
6
7
8
@media screen
and (device-width: 601px)
and (device-height: 906px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332)
and (orientation: landscape) {

}

Kindle Fire HD 7” landscape & portrait

1
2
3
4
5
6
@media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5) {

}

Kindle Fire HD 7” portrait

1
2
3
4
5
6
@media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: portrait) {
}

Kindle Fire HD 7” landscape

1
2
3
4
5
6
7
@media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: landscape) {

}

Kindle Fire HD 8.9” landscape & portrait

1
2
3
4
5
6
@media only screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1.5) {

}

Kindle Fire HD 8.9” portrait

1
2
3
4
5
6
@media only screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: portrait) {
}

Kindle Fire HD 8.9” landscape

1
2
3
4
5
6
7
@media only screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: landscape) {

}

Non-Retina Screens

1
2
3
4
5
@media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1) {
}

Retina Screens

1
2
3
4
5
6
@media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 2)
and (min-resolution: 192dpi) {
}

Moto 360 Watch

1
2
3
4
5
@media
(max-device-width: 218px)
and (max-device-height: 281px) {

}